---
import axios from "axios";
import { SocksProxyAgent } from "socks-proxy-agent";

import { parse } from "node-html-parser";

const proxyHost = "127.0.0.1";
const proxyPort = 9050;
const proxyOptions = `socks5h://${proxyHost}:${proxyPort}`;
const httpsAgent = new SocksProxyAgent(proxyOptions);
const baseUrl1 = "https://fr.wikipedia.org";
// const baseUrlXlate = "https://libretranslate.com";
// set libretranslate service base url here (or run locally):
const baseUrlXlate = "http://127.0.0.1:12000";

const wikipediaReaderClient = axios.create({
  baseURL: baseUrl1,
  httpAgent: httpsAgent,
  httpsAgent,
});
const libreTranslateClient = axios.create({
  baseURL: baseUrlXlate,
  httpAgent: httpsAgent,
  httpsAgent,
});

import Layout from "../layouts/Layout.astro";
import TranslatePrompt from "../components/TranslatePrompt.astro";
import {
  deleteEverySecondWord,
  extractRandomParagraph,
  getTranslation,
} from "../processing";

const wikiPage = await wikipediaReaderClient
  .get("/wiki/Special:Random")
  .then((result) => {
    return parse(result.data);
  })
  .catch((error) => {
    console.log(error);
  });

if (!wikiPage) {
  throw new Error("Did not return wikiPage");
}

const randomParagraph = extractRandomParagraph(wikiPage as unknown as Document);

const translation = await getTranslation(libreTranslateClient, randomParagraph);

const eswd = deleteEverySecondWord(translation);

console.log(eswd.phrase);
console.log(eswd.missings);

const prompt = randomParagraph;
---

<style is:global>
  .gap {
    color: red;
  }
  .right {
    color: greenyellow;
  }
</style>

<Layout title="Fill in the Words.">
  <TranslatePrompt prompt={prompt} eswd={JSON.stringify(eswd)} />
</Layout>

<style>
  main {
    margin: auto;
    padding: 1.5rem;
    max-width: 60ch;
  }
  h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
  }
  .text-gradient {
    background-image: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400%;
    background-position: 0%;
  }
  .textfield {
    line-height: 1.6;
    margin: 1rem 0;
    border: 1px solid rgba(var(--accent), 25%);
    background-color: white;
    padding: 1rem;
    border-radius: 0.4rem;
    min-height: 320px;
  }
  .textfield code {
    font-size: 0.875em;
    font-weight: bold;
    background: rgba(var(--accent), 12%);
    color: rgb(var(--accent));
    border-radius: 4px;
    padding: 0.3em 0.45em;
  }
  .textfield strong {
    color: rgb(var(--accent));
  }
  .link-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
    gap: 1rem;
    padding: 0;
  }
</style>
